<template>
  <div>
    <!-- 导航栏 -->
    <div class="navigation">
      <div class="menu1" @click="menu1()">
        <router-link to="/mobliedata001" style="text-decoration: none;"
          ><span :style="{ color: color1 }">交易</span></router-link
        >
      </div>
      <!-- <div class="menu2" @click="menu2()">
        <router-link to="/mobliedata2" style="text-decoration: none;"
          ><span :style="{ color: color2 }">任务</span></router-link
        >
      </div> -->
      <div class="menu3" @click="menu3()">
        <router-link to="/mobliedata3" style="text-decoration: none;"
          ><span :style="{ color: color3 }">账户</span></router-link
        >
      </div>
      <!-- <div class="menu3" @click="menu4()">
        <router-link to="/networth" style="text-decoration: none;"
          ><span :style="{ color: color4 }">净值</span></router-link
        >
      </div> -->
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeIndex: '1',
      color1: '#FFFFFF',
      color2: '#FFFFFF',
      color3: '#FFFFFF',
      color4: '#FFFFFF'
    }
  },
  methods: {
    menu1() {
      this.color1 = 'red'
      this.color2 = '#FFFFFF'
      this.color3 = '#FFFFFF'
      this.color4 = '#FFFFFF'
    },
    menu2() {
      this.color1 = '#FFFFFF'
      this.color2 = 'red'
      this.color3 = '#FFFFFF'
      this.color4 = '#FFFFFF'
    },
    menu3() {
      this.color1 = '#FFFFFF'
      this.color2 = '#FFFFFF'
      this.color3 = 'red'
      this.color4 = '#FFFFFF'
    },
    menu4() {
      this.color1 = '#FFFFFF'
      this.color2 = '#FFFFFF'
      this.color3 = '#FFFFFF'
      this.color4 = 'red'
    }
  }
}
</script>
<style Lang="less" scoped>
.all {
  width: 375px;
  display: flex;
  margin: 0 auto;
  flex-direction: column;
  background: #010017;
}
.title {
  display: flex;
  flex-direction: row;
  color: #ffffff;
}
span {
  font-size: 16px;
}
.titleName {
  margin-right: 138px;
  margin-left: 170px;
}
img {
  width: 345.5px;
  height: 73px;
  margin: 10px 15px 10px 15px;
}
.navigation {
  width: 375px;
  background: #1f1e32;
  display: flex;
  margin-bottom: 10px;
}
.menu1,
.menu2,
.menu3 {
  flex: 1;
  text-align: center;
  margin: 10px;
}
</style>
